<template>
  <div>
    <div>
      <div style="margin: 50px 0 ;text-align: center;font-size: 20px">
        Sign in
      </div>
      <div>
        <div class="show-min-576px" >
          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;align-content: center;margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                <MailOutlined style="font-size: 24px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input size="big" style="box-sizing: border-box;width: 100%;height: 40px;" v-model="loginInfo.mail" placeholder="Please input your email"/>
              </span>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;align-content: center;margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <LockOutlined style="font-size: 24px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input size="big" style="box-sizing: border-box;max-width: 100%;height: 40px;" type="password" v-model="loginInfo.password" placeholder="Please input password"/>
              </span>
            </div>
          </div>
        </div>
        <div class="show-max-576px" >
          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;align-content: center;margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                <MailOutlined style="font-size: 20px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input style="box-sizing: border-box;width: 100%" v-model="loginInfo.mail" placeholder="Please input your email"/>
              </span>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;align-content: center;margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <LockOutlined style="font-size: 20px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input style="box-sizing: border-box;max-width: 100%;" type="password" v-model="loginInfo.password" placeholder="Please input password"/>
              </span>
            </div>
          </div>
          <!--          <a-form-item :colon="false">-->
          <!--            <template #label>-->
          <!--              <LockOutlined style="font-size: 20px"/>-->
          <!--            </template>-->
          <!--            <basic-input style="box-sizing: border-box;width: 100%;" type="password" v-model="loginInfo.password"/>-->
          <!--          </a-form-item>-->
        </div>
      </div>
      <div style="margin-bottom: 20px;text-align: right;">
        <span style="color: #1677ff;cursor: pointer" @click="toRoute('/auth/forgetPassword')">Forget password？</span>
      </div>
      <basic-button @click="toLogin" style="box-sizing: border-box;width: 100%" :inverse-color="true">
        <div style="text-align: center;font-size: 16px;">
          Sign in
        </div>
      </basic-button>
      <basic-button @click="toRoute('/auth/register')" style="box-sizing: border-box;width: 100%;border: 1px solid #1677ff ;margin-top: 10px" >
        <div style="text-align: center;font-size: 16px;">
          Register
        </div>
      </basic-button>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {login} from "../../api/UserActionRequest";
import {searchCart} from "../../api/CartRequest";
import FooterLayout from "../../layout/footerLayout.vue";
import HeaderLayout from "../../layout/headerLayout.vue";
import {ArrowRightOutlined, LockOutlined, MailOutlined, UserOutlined} from "@ant-design/icons-vue";
import {notification} from "ant-design-vue";

export default defineComponent({
  components: {
    MailOutlined, LockOutlined, UserOutlined, ArrowRightOutlined
  },
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const loginInfo = reactive({
      mail: '',
      password: ''
    })

    const toLogin = () => {
      login(loginInfo).then(async (res) => {
        store.commit("SET_CONFIG", {
          token: res.data.result?.token,
          refreshToken: res.data.result?.refreshToken
        })
        store.commit("SET_GLOBAL_INFO", {
          userInfo: res.data.result?.user,
        })
        await searchCart().then((res) => {
          if(res.data.result!=undefined&&res.data.result.cartList!=null){
            for (let i = 0; i < res.data.result.cartList.length; i++) {
              //@ts-ignored
              res.data.result.cartList[i].good.specification.specification=JSON.parse(res.data.result.cartList[i].good.specification.specification)
            }
          }
          store.commit('SET_GLOBAL_INFO', {
            cartInfo: res.data.result
          })
        })
        toRoute('/');
      }).catch((res)=>{
        notification.warning(res.data)
      })
    }
    const toRoute = (path: string) => {
      router.push({
        path
      })
    }

    return {
      toLogin,
      loginInfo,
      toRoute
    }
  }
})
</script>

<style scoped lang="less">
.show-min-576px{
  @media screen and (max-width: 576px){
    display: none!important;
  }
}
.show-max-576px{
  @media screen and (min-width: 577px){
    display: none!important;
  }
}
</style>
